<template>
  <view class="wrap">
    <view class="key-input">
      <view class="title">输入验证码</view>
      <view class="tips">验证码已发送至 +{{ phone }}</view>
      <u-code-input v-model="code" :disabledKeyboard="false" @change="change" @finish="finish" :focus="true"
        maxlength="4"></u-code-input>
      <text :class="{ error: error }">验证码错误，请重新输入</text>
      <view class="captcha">
        <text :class="{ noCaptcha: show1 }" @tap="noCaptcha">点击重新获取验证码</text>

        <text :class="{ regain: !show1 }">请在{{ countDown }}秒内数去验证码</text>
      </view>
    </view>

    <!-- <view class="btn">
			<u-button type="primary" @click="goto">验证</u-button>
		</view> -->

    <u-toast ref="notice"></u-toast>
    <u-keyboard ref="uKeyboard" mode="number" @confirm="confirm" @cancel="cancel" @change="valChange"
      @backspace="backspace" :dotDisabled="true" :show="show"></u-keyboard>
  </view>
</template>

<script>
export default {
  onLoad(option) {
    this.type = option.type ? option.type : "";
    console.log(this.type);

    this.phone = option.phone ? option.phone : "";
  },
  onReady() {
    // 如果想一进入页面就打开键盘，请在此生命周期调用
    // this.show = true;
  },
  onShow() {
    // 判断字符串是否为空
    if (this.phone.trim().length === 0) {
      this.$refs.notice.show({
        type: "warning",
        message: "手机号为空，请重新输入手机号",
        complete: () => {
          complete: () => {
            //返回上一个界面
            uni.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          };
        },
      });
    } else {
      // 发送验证码
      this.getcode();
    }
  },

  data() {
    return {
      maxlength: 4,
      code: "",
      show1: false,
      id: "",
      show: false,
      type: "",
      phone: "",
      countDown: 60,
    };
  },
  mounted() {
    this.startCountDown();
  },

  methods: {
    // 按键被点击(点击退格键不会触发此事件)
    valChange(val) {
      // 将每次按键的值拼接到code变量中，注意+=写法
      this.code += val;
    },
    // 退格键被点击
    backspace() {
      // 删除code的最后一个字符
      if (this.code.length)
        this.code = this.code.substr(0, this.code.length - 1);
    },

    // 倒计时60s
    startCountDown() {
      let timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(timer);

          this.show1 = true;
        }
      }, 1000);
    },

    change(e) {
      // console.log('内容改变，当前值为：' + e);
    },
    finish(e) {
      // 调用检验输入验证码是否正确
      this.code = e;
      this.checkMobileCode();
    },

    // 键盘确认
    confirm() {
      this.checkMobileCode();
    },

    // 键盘取消
    cancel() {
      this.show = false;
    },

    goto() {
     if(this.type == "check") {
        uni.$u.route({
          type: "redirectTo",
          url: "pages/test/seller/xieyi",
          params: {
            phone: this.phone,
            show: true,
          }

        });
      } else {
        uni.$u.route({
          type: "redirectTo",
          url: "pages/test/seller",
          params:{
            phone: this.phone,
            id: this.id,
            flag:"phone",
            type:this.type
          }
         

        });
      }
    },

    // 重新获取验证码
    noCaptcha() {
      this.getcode();
      this.startCountDown();

      this.show1 = false;
      this.countDown = 60;
    },
    async getcode() {
      let data = {
        phone: this.phone,
      };
      await this.$u.api.user.getmobilecode(data);
    },
    async checkMobileCode() {
      let data = {
        code: this.code,
        phone: this.phone,
        type: this.type,
      };

      let result = await this.$u.api.user.checkcode(data);
      {
        if (result.code) {
          this.$refs.notice.show({
            type: "success",
            message: result.msg,
            duration: 900,
            complete: () => {
              this.show = false;
              this.goto();
            },
          });
        } else {

          if (result.data["errorMsg"] == "noRegister") {
            this.$refs.notice.show({
              type: "error",
              message: result.msg,
              duration: 2200,
              complete: () => {
                uni.$u.route({
                  url: "pages/user/userform",
                  params: {
                    type: "seller",
                  },
                });
              },
            });


          } else if (result.data["errorMsg"] == "codeError") {
            this.$refs.notice.show({
              type: "warning",
              message: result.msg,
              duration: 1500,
              complete: () => {
                this.code = ""
              }

            })
          }


        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  width: 70%;
  margin: 120px auto;
}

.wrap {
  padding: 80rpx;
}

.box {
  margin: 30rpx 0;
  font-size: 30rpx;
  color: 555;
}

.key-input {
  padding: 30rpx 0;

  text {
    display: none;
  }

  .error {
    display: block;
    color: red;
    font-size: 30rpx;
    margin: 20rpx 0;
  }
}

.title {
  font-size: 50rpx;
  color: #333;
}

.key-input .tips {
  font-size: 30rpx;
  color: #333;
  margin-top: 20rpx;
  margin-bottom: 60rpx;
}

.captcha {
  font-size: 30rpx;
  margin-top: 40rpx;

  .noCaptcha {
    display: block;
    color: blue;
  }

  .regain {
    display: block;
  }
}
</style>
